import React, { useState, useEffect } from 'react';
import { FFmpeg } from '@ffmpeg/ffmpeg';

// 创建一个简化的测试组件，专注于FFmpeg的加载
function TestFFmpeg() {
  const [status, setStatus] = useState('准备中...');
  const [logs, setLogs] = useState([]);
  const [ffmpeg, setFfmpeg] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);

  // 添加日志并更新状态
  const addLog = (message) => {
    const timestamp = new Date().toLocaleTimeString();
    const newLog = `${timestamp}: ${message}`;
    setLogs(prev => [...prev, newLog].slice(-50)); // 只保留最近50条日志
    setStatus(message);
    console.log(newLog);
  };

  // 初始化并测试FFmpeg
  useEffect(() => {
    const testFFmpeg = async () => {
      try {
        addLog('开始创建FFmpeg实例...');
        const instance = new FFmpeg();
        setFfmpeg(instance);
        
        addLog('FFmpeg实例创建成功，添加事件监听器...');
        
        // 添加所有可能的事件监听器
        instance.on('log', ({ message }) => {
          addLog(`FFmpeg日志: ${message}`);
        });
        
        instance.on('progress', (progress) => {
          addLog(`FFmpeg进度: ${JSON.stringify(progress)}`);
        });
        
        instance.on('ready', () => {
          addLog('FFmpeg ready事件触发!');
        });
        
        instance.on('error', (error) => {
          addLog(`FFmpeg错误: ${error.message}`);
        });
        
        // 尝试加载FFmpeg核心文件
        addLog('开始调用ffmpeg.load()，使用0.12.0版本核心文件...');
        
        // 使用setTimeout确保我们能看到加载前的状态
        setTimeout(async () => {
          try {
            const startTime = Date.now();
            
            // 使用0.12.0版本的核心文件
            const loadResult = await instance.load({
              coreURL: 'https://unpkg.com/@ffmpeg/core@0.12.0/dist/ffmpeg-core.js',
              wasmURL: 'https://unpkg.com/@ffmpeg/core@0.12.0/dist/ffmpeg-core.wasm',
              workerURL: 'https://unpkg.com/@ffmpeg/core@0.12.0/dist/ffmpeg-core.worker.js'
            });
            
            const endTime = Date.now();
            addLog(`FFmpeg.load()调用完成，耗时: ${(endTime - startTime) / 1000}秒`);
            addLog(`FFmpeg.load()返回结果类型: ${typeof loadResult}`);
            
            // 检查加载状态
            addLog(`FFmpeg.loaded属性值: ${instance.loaded}`);
            setIsLoaded(instance.loaded);
            
            if (instance.loaded) {
              addLog('FFmpeg加载成功! 尝试执行简单命令...');
              
              // 尝试执行一个简单的命令
              try {
                await instance.exec(['-version']);
                addLog('FFmpeg命令执行成功! 版本命令已运行');
              } catch (cmdError) {
                addLog(`FFmpeg命令执行失败: ${cmdError.message}`);
              }
            } else {
              addLog('警告: FFmpeg.load()完成但loaded属性为false');
            }
          } catch (loadError) {
            addLog(`FFmpeg加载失败: ${loadError.message}`);
            addLog(`错误类型: ${loadError.name}`);
            addLog(`错误栈: ${loadError.stack || '无'}`);
          }
        }, 500);
      } catch (error) {
        addLog(`测试过程发生错误: ${error.message}`);
      }
    };

    // 组件挂载后立即开始测试
    testFFmpeg();
  }, []);

  return (
    <div className="p-4 max-w-3xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">FFmpeg加载测试</h2>
      
      <div className="mb-4 p-3 bg-gray-100 rounded-lg">
        <h3 className="font-semibold mb-2">当前状态:</h3>
        <p className="text-lg">{status}</p>
        <p className="text-sm text-gray-600 mt-1">
          FFmpeg加载状态: {isLoaded ? '已加载' : '未加载'}
        </p>
      </div>
      
      <div className="bg-gray-800 text-gray-100 p-4 rounded-lg max-h-96 overflow-y-auto">
        <h3 className="font-semibold mb-2 text-gray-300">详细日志:</h3>
        <div className="space-y-1">
          {logs.map((log, index) => (
            <div key={index} className="text-sm">{log}</div>
          ))}
        </div>
      </div>
      
      <div className="mt-6">
        <p className="text-sm text-gray-600">
          注意: 所有日志也会输出到浏览器控制台，请打开控制台查看更多详细信息。
        </p>
      </div>
    </div>
  );
}

export default TestFFmpeg;